<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2020 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div [class.hidden]="!loading">
    <winery-loader></winery-loader>
</div>
<div *ngIf="!loading" id="sectionsContentContainer" class="sectionsContentContainer">
    <div id="searchBoxContainer" class="searchBoxContainer">
        <input type="text" id="searchBox" [(ngModel)]="filterString">
    </div>
    <div id="sectionsOverviewShadow" class="sectionsOverviewShadow">
        <div id="gcprightcolumn"></div>
        <div id="overviewtopshadow"></div>
        <div id="overviewbottomshadow"></div>
    </div>
    <div class="sectionsComponentContainer" id="sectionsComponentContainer">
        <winery-entity-container
            *ngFor="let item of componentData
                | filterSections: { showNamespaces: showNamespace, filterString: filterString }
                | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage }"
            [toscaType]="toscaType"
            [xsdSchemaType]="importXsdSchemaType"
            [data]="item"
            (deleted)="getSectionsData()"
            (showsLastElement)="showLastElement.set(item.id, $event)"
            [ngClass]="showLastElement.get(item.id) ? 'addPadding' : ''"
            class="winery-entity-container">
        </winery-entity-container>
    </div>
    <div class="sectionSidebar" id="sectionSidebar">
        <button class="btn btn-default sidebar-btn sectionBtn" id="sectionsAddNewBtn" (click)="onAdd();">
            <i class="fa fa-plus" aria-hidden="true"></i> Add new
        </button>
        <button class="btn btn-default sidebar-btn sectionBtn" id="sectionsImportCsarBtn"
                (click)="addCsarModal.show()">
            <i class="fa fa-upload" aria-hidden="true"></i> Import CSAR <span *wineryRepositoryShowOnFeature="configEnum.EdmmModeling">/ EDMM-Model</span>
        </button>
        <button class="btn btn-default sidebar-btn sectionBtn" id="sectionsGroupBtn" (click)="onChangeView()"
                [disabled]="showSpecificNamespaceOnly()">
            <i [className]="showNamespace === 'all' ? 'fa fa-compress' : 'fa fa-expand'" aria-hidden="true"></i> {{ changeViewButtonTitle }}
        </button>
        <button class="btn btn-default sidebar-btn sectionBtn" (click)="getSectionsData()">
            <i class="fa fa-refresh" aria-hidden="true"></i> Reload Data 
        </button>

        <div *ngIf="toscaType === toscaTypes.ServiceTemplate" class="sectionBtn">
            <!-- FIXME seems the component does not query the artifact types properly
            <winery-xaas-packager *wineryRepositoryHideOnFeature="'yaml'"
                                  id="sectionCreateFromArtifactBtn">
            </winery-xaas-packager>
            -->
            <winery-placement *wineryRepositoryFeatureToggle="configEnum.Placement"
                              id="sectionCreateFromDataFlowBtn">
            </winery-placement>
        </div>
    </div>
    <div id="sectionsFooterContainer" class="sectionsFooterContainer">
        <div class="form-inline selectItemsPerPage">
            <label id="sectionPaginationLabel" for="selectItemsPerPage">Items per Page:</label>
            <select id="selectItemsPerPage" class="form-control" [(ngModel)]="itemsPerPage">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>
        </div>
        <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
    </div>
</div>

<winery-add-component #addModal
                      [componentData]="allElements"
                      [toscaType]="toscaType">
</winery-add-component>

<winery-modal bsModal #addCsarModal="bs-modal" [modalRef]="addCsarModal">
    <winery-modal-header [title]="'Upload Deployment-Model / -Archive'"></winery-modal-header>
    <winery-modal-body>
        <winery-uploader [modalRef]="addCsarModal" [uploadUrl]="fileUploadUrl" #fileUploader
                         [isEditable]="true"
                         (onError)="onUploadError($event)"
                         (onSuccess)="onUploadSuccess($event)"></winery-uploader>
        <div class="checkbox">
            <label style="display: block;">
                <input [(ngModel)]="overwriteValue" (change)="importOptionsChanged()" type="checkbox" value="">
                Overwrite existing content
            </label>
            <label style="display: block;" *wineryRepositoryShowOnFeature="configEnum.EdmmModeling">
                <input [(ngModel)]="edmmImport" (change)="importOptionsChanged()" type="checkbox" value="">
                Import EDMM-Model
            </label>
            <label *ngIf="isAccountabilityCheckEnabled" style="display: block;">
                <input [(ngModel)]="validateInput" (change)="importOptionsChanged()" type="checkbox" value="">
                Validate content integrity (uses the Ethereum blockchain)
            </label>
        </div>
    </winery-modal-body>
    <winery-modal-footer [showDefaultButtons]="false">
        <button type="button" class="btn btn-default" (click)="addCsarModal.hide()">Cancel</button>
    </winery-modal-footer>
</winery-modal>

<winery-modal bsModal #addYamlModal="bs-modal" [modalRef]="addYamlModal">
    <winery-modal-header [title]="'Add YAML'"></winery-modal-header>
    <winery-modal-body>
        <winery-uploader [modalRef]="addYamlModal" [uploadUrl]="fileUploadUrl + 'yaml/'"
                         [isEditable]="true"
                         (onSuccess)="getSectionsData()"></winery-uploader>
    </winery-modal-body>
    <winery-modal-footer [showDefaultButtons]="false">
        <button type="button" class="btn btn-default" (click)="addYamlModal.hide()">Cancel</button>
    </winery-modal-footer>
</winery-modal>

<winery-modal bsModal #validationModal="bs-modal" [modalRef]="validationModal">
    <winery-modal-header [title]="'Validation result'"></winery-modal-header>
    <winery-modal-body>
        <div *ngIf="importMetadata" class="scroll">
            <ul>
                <li *ngFor="let file of importMetadata.verificationMap" class="noWrap">
                    <span [class]="getVerificationClass(file.value)">{{ file.value }}</span>
                    <a class="pointer" (click)="getProvenance(file)">{{ file.key }}</a>
                    <ul *ngIf="fileProvenance[file.key]">
                        <li *ngFor="let item of fileProvenance[file.key]">
                            Author: <b>{{ item.authorName }}</b> ({{ item.authorAddress }})<br>
                            Is authorized: <span
                            [class]="getAuthorizedClass(item.authorized)">{{ item.authorized }}</span><br>
                            Transaction Id: {{ item.transactionHash }}<br>
                            <span *ngIf="item.fileHash">
                                File hash: {{ item.fileHash }}<br>
                            </span>
                            <span *ngIf="item.addressInImmutableStorage">
                                Address in Immutable Storage: {{item.addressInImmutableStorage}} <br>
                            </span>
                            Timestamp: {{ item.unixTimestamp * 1000 | date:'yyyy-MM-dd HH:mm:ss' }}<br>
                            <a *ngIf="item.addressInImmutableStorage" class="pointer"
                               (click)="downloadFileFromImmutableStorage(item.addressInImmutableStorage, item.fileName)">(download)</a>
                            <a *ngIf="item.addressInImmutableStorage"
                               (click)="openFileComparisonModal(fileComparer, item)">(compare)</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </winery-modal-body>
    <winery-modal-footer [showDefaultButtons]="false">
        <button type="button" class="btn btn-default" (click)="validationModal.hide()">Close</button>
    </winery-modal-footer>
</winery-modal>

<ng-template #fileComparer>
    <div class="modal-header">
        <h4 class="modal-title pull-left">File Version Comparison</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="modal-body">
        <winery-file-comparison
            [selectedServiceTemplate]="importMetadata.entryServiceTemplate.qname"
            [fileProvenance]="selectedFileProvenance"
            [selectedFileProvenanceElement]="selectedFile"
            [accountabilityService]="accountability"
        ></winery-file-comparison>
    </div>
</ng-template>
